import { useTitle } from "ahooks";
import React, { useState } from "react";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import useLoadQuestionData from "../../../hooks/useLoadQuestionData";
import Loading from "../../components/Loading";
import Error from "../../Error";
import ChartStat from "./ChartStat";
import ComponentList from "./ComponentList";
import styles from "./index.module.scss";
import PageStat from "./PageStat";
import StatHeader from "./StatHeader";

const Stat: React.FC = () => {
  const { loading, error } = useLoadQuestionData();
  const { title, isPublished } = useGetPageInfo();
  const [selectedComponentId, setSelectedComponentId] = useState("");
  const [selectedComponentType, setSelectedComponentType] = useState("");

  useTitle("数据统计 - " + title);

  if (loading) return <Loading />;

  if (error || !isPublished)
    return <Error title="错误" subTitle="未找到问卷，或许该问卷还未发布" />;

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <StatHeader />
      </div>
      <div className={styles["content-wrapper"]}>
        <div className={styles.left}>
          <ComponentList
            config={{
              selectedComponentId,
              setSelectedComponentId,
              setSelectedComponentType,
            }}
          />
        </div>
        <div className={styles.main}>
          <PageStat
            config={{
              selectedComponentId,
              setSelectedComponentId,
              setSelectedComponentType,
            }}
          />
        </div>
        <div className={styles.right}>
          <ChartStat
            config={{
              selectedComponentId,
              selectedComponentType,
            }}
          />
        </div>
      </div>
    </div>
  );
};
export default Stat;
